<script lang="ts" setup>
import { timestampData, timestampData1 } from '@/assets/timestamp';
import { ClockCircleOutlined } from '@ant-design/icons-vue';


import AOS from 'aos';
import 'aos/dist/aos.css';

// 在组件挂载时初始化AOS
onMounted(() => {
  AOS.init()
})
</script>

<template>
  <div class="project">
    <div class="project-title">
      <h1 class="project-title-h1">学校发展历程回溯</h1>
    </div>
    <div class="project-timeline">
      <!-- 时间线 左 -->
      <a-timeline mode="alternate" data-aos="fade-right">
        <a-tooltip color="white" v-for="item in timestampData" :key="item.id" :placement="item.direction">
          <template #title>
            <a-image :src="item.image"></a-image>
            <span class="project-timeline-text">{{ item.title }}</span>
          </template>
          <a-timeline-item :color="item.color">{{ item.title }}</a-timeline-item>
        </a-tooltip>

        <!-- 时间logo -->
        <a-tooltip placement="topRight">
          <template #title>
            <a-image src="/src/assets/timestamp/001.png"></a-image>
            <span class="project-timeline-text">学校首次承办省级技能竞赛 2007-11-10</span>
          </template>
          <a-timeline-item color="red">
            <template #dot>
              <ClockCircleOutlined style="font-size: 16px" />
            </template>
            学校首次承办省级技能竞赛 2007-11-10
          </a-timeline-item>
        </a-tooltip>
      </a-timeline>

      <!-- 时间线 右 -->
      <a-timeline mode="alternate" data-aos="fade-left">
        <a-tooltip color="white" v-for="item in timestampData1" :key="item.id" :placement="item.direction">
          <template #title>
            <a-image :src="item.image"></a-image>
            <span class="project-timeline-text">{{ item.title }}</span>
          </template>
          <a-timeline-item :color="item.color">{{ item.title }}</a-timeline-item>
        </a-tooltip>
      </a-timeline>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.project {
  width: 100%;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;

  &-title {
    &-h1 {
      font-size: 30px;
    }
  }

  &-timeline {
    width: 100%;
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    // 时间戳字体颜色
    &-text {
      color: black;
    }
  }
}
</style>
